<template>
  <div class="pagination">
    <span class="pageLeft"
      >总共<span class="size">{{ total }}</span
      >条记录；每页显示<span class="size">{{ $attrs["page-size"] }}</span
      >条记录</span
    >
    <el-pagination
      v-bind="attrs"
      :total="pageTotal"
      layout="prev,pager,next,sizes,jumper"
      :page-sizes="pageSizes"
    ></el-pagination>
  </div>
</template>

<script setup>
import { useAttrs, computed, onMounted } from "vue";
const attrs = useAttrs();

const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  limitPage: {
    type: Number,
    default: 0,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 40, 50],
  },
});

const pageTotal = computed(() => {
  if (props.limitPage) {
    const limitTotal = props.pageSize * props.limitPage;
    return props.total > limitTotal ? limitTotal : props.total;
  } else {
    return props.total;
  }
});

onMounted(() => {
  const jumpElement = document.querySelector(".el-pagination__jump");
  if (jumpElement) {
    jumpElement.firstChild.nodeValue = "跳转";
  }
});
</script>

<style lang="less" scoped>
.pagination {
  margin-top: 19px;
  display: flex;
  justify-content: space-between;
  .pageLeft {
    font-weight: 400;
    font-size: 12px;
    color: #333;
    .size {
      color: #2863fa;
    }
  }
}
</style>
<style>
.el-pagination.is-background .el-pager li {
  /*对页数的样式进行修改*/
  background-color: #fff;
  border: 1px solid #e6e6e6;
  font-weight: 400;
  color: #333;
}
.el-pagination.is-background .btn-next {
  /*对下一页的按钮样式进行修改*/
  background-color: #fff;
}
.el-pagination.is-background .btn-prev {
  /*对上一页的按钮样式进行修改*/
  background-color: #fff;
}
.el-pagination.is-background .el-pager .el-input__inner {
  /*当前选中页数的样式进行修改*/
  background-color: #2863fa;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #2863fa;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  /*当前选中页数的样式进行修改*/
  color: #fff;
  cursor: pointer;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  /*当前选中页数的样式进行修改*/
  color: #2863fa;
}
</style>